<script setup>
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import {clearSessionStorage, notify, timeRefresh, toggleFullScreen, toStockDetail} from "../../utils/commonScript.js";
import {POST} from "../../api/index.js";
import apiUrl from "../../config/apiUrls.js";
import {useStore} from "vuex";
import {getStockDetail} from "../../utils/getData.js";
import IndexedDBManager from "../../utils/IndexedDBManager.js";

const router = useRouter()
const route = useRoute()
const store = useStore()
const isFull = ref(false)
const sz = ref('')

const baseInfo = computed(() => {
  return store.state.baseInfo;
})

const goPath = (val) => {
  path.value = val
  router.push(val)
}
const path = ref("/")
path.value = '/' + route.path.split('/')[1]

/**
 * 退出登录
 */
const loginOutHandle = () => {
  POST(apiUrl.logout, {
  }).then(res => {
    clearSessionStorage();
    goPath('/login');
  });
}

const fullHandle = () => {
  isFull.value = !isFull.value
  toggleFullScreen()
}

const getSZData = () => {
  getStockDetail({code: '000000'}, (res) => {
    sz.value = res.f43
  })
}
onMounted(() => {
  getSZData()
  timeRefresh(() => {
    setInterval(() => {
      getSZData()
    }, 60000)
  })
})

const clearHandle = () => {
  const db = new IndexedDBManager('db', '1.0', 'stock')
  db.clearStore();
  notify("清除成功")
}
</script>

<template>
<div class="nav-header">
  <div class="home-logo">
    缠论K线工具
  </div>
  <div class="nav">
    <div class="left">
      <span :class="[{active: path === '/'}]" @click="goPath('/')">首页</span>
      <span :class="[{active: path === '/stock'}]" @click="goPath('/stock')">股票</span>

      <span :class="[{active: path === '/futures'}]" @click="goPath('/futures')">期货</span>
      <span :class="[{active: path === '/task'}]" @click="goPath('/task')">任务打卡</span>
      <span :class="[{active: path === '/cl'}]" @click="goPath('/cl')">缠中说禅</span>
    </div>
    <div class="right">
      <span class="full" @click="toStockDetail(router, '000000', '上证')">上证 {{sz}}</span>
      <span class="full" @click="fullHandle">{{!isFull ? '全屏' : '退出全屏'}}</span>
      <span class="full" @click="clearHandle">清除缓存</span>
      <span>会员到期日：{{baseInfo.expireDate}}</span>
      <span>积分：{{baseInfo.score}}</span>
      <span @click="loginOutHandle">退出</span>
    </div>
  </div>


</div>
</template>

<style scoped lang="scss">
.nav-header{
  height: 60px;
  line-height: 60px;
  background-color: #cb2020;
  display: flex;
  color: #FFFFFF;
  .home-logo {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    background-color: #df1212;
    color: #FFFFFF;
    width: 220px;
  }
  .nav{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  span{
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
    &:hover,&.active{
      color: yellow;
    }
  }
  .full{
    color: yellow;
  }
}
</style>
